﻿@page
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript">
        /**
         * 更换验证码。
         * @@param imageID
         */
        function changeVerifyCode(imageID) {
            var Name = "rt";
            var Value = Math.random()
            var uri = "/VerifyCode?VerifyCodeID=" + imageID + "&rt=" + Value;
            document.getElementById(imageID).src = uri;
        }

        /**
         * 用户点击验证码控件时引发此事件。
         * @@param e
         */
        function verifyCodeClick(e) {
            var cId = this.children[0].id;
            changeVerifyCode(cId);
        }

        var verifyCodeIdList = ["VerifyCode1", "VerifyCode2"];
        var verifyCodeLoadIndex = 0;

        /**
         * 尝试加载下一个验证码。
         */
        function loadNextVerifyCode() {
            if (verifyCodeIdList && verifyCodeLoadIndex < verifyCodeIdList.length) {
                var ctlId = verifyCodeIdList[verifyCodeLoadIndex++];
                var ctl = document.getElementById(ctlId);
                ctl.onload = onVerifyCodeLoad;
                changeVerifyCode(ctlId);
                ctl.parentElement.onclick = verifyCodeClick;
            }
        }

        /**
         * 实现逐个加载验证码的效果。*****特别注意：仅当需要同时显示多个验证码时才需要这样做。之所以这样做是因为 asp.net core 2.2 的 session 功能不支持并行赋值（即：不能同时请求多个验证码，否则会导致用户输入的验证码不正确）。最好的方式是修改并自定义实现验证码的存储代码，例如存储在数据库中或加密后存储在cookie中。
         */
        function onVerifyCodeLoad() {
            var theimg = this;
            if (theimg.complete || theimg.readyState == "complete" || theimg.readyState == "loaded") {
                theimg.onload = undefined;
                loadNextVerifyCode(); //尝试加载下一个验证码。
            }
        }

        function load() {
            loadNextVerifyCode();
        }

        function btnClick() {
            document.location.href = "/?VerifyCode1=" + TextBox1.value + "&VerifyCode2=" + TextBox2.value;
        }
    </script>
</head>
<body onload="load()">
    @{
    string VerifyCode1 = this.Request.Query["VerifyCode1"];
    string VerifyCode2 = this.Request.Query["VerifyCode2"];
    if (VerifyCode1 != null || VerifyCode2 != null)
    {
            @if (Thinksea.VerifyCode_AspNetCoreDemo.Pages.VerifyCodeModel.IsVerify(this.HttpContext, VerifyCode1, "VerifyCode1"))
{
                @("【验证码1输入正确】")
}
else
{
                @("【验证码1输入错误】正确答案是" + Thinksea.VerifyCode_AspNetCoreDemo.Pages.VerifyCodeModel.GetVerifyCode(this.HttpContext, "VerifyCode1"))
}
            <br />
        if (Thinksea.VerifyCode_AspNetCoreDemo.Pages.VerifyCodeModel.IsVerify(this.HttpContext, VerifyCode2, "VerifyCode2"))
        {
                @("【验证码2输入正确】")
        }
        else
        {
                @("【验证码2输入错误】正确答案是" + Thinksea.VerifyCode_AspNetCoreDemo.Pages.VerifyCodeModel.GetVerifyCode(this.HttpContext, "VerifyCode2"))
            }
        }
    }
    <br />
    <a href="javascript:;"><img id="VerifyCode1" /></a>
    <input id="TextBox1" type="text" />
    <p>
        <a href="javascript:;"><img id="VerifyCode2" /></a>
        <input id="TextBox2" type="text" />
        <button type="button" onclick="btnClick()">验证</button>
    </p>
</body>
</html>
